Mobile Subnavigation 移動端子導航

在移動端，常用的子導航實現方式包括摺疊面板、順序選單、章節選單和分類著陸頁。選擇合適的方式需要根據資訊架構中子分類的數量和使用者在站點上的導航模式。移動裝置螢幕較小，子分類的展示比桌面端更具挑戰性，因此需要精心設計。

Cisco.com：該桌面網站使用一個水平導航欄來容納主要類別。當滑鼠懸停時，每個主要類別會展開為一個帶有相應二級和三級子類別的大型選單。該大型選單在視覺上分為三列（產品、解決方案、服務），並且在底部還包含一個選項卡列表（企業、服務提供商、中小企業）。

子導航的設計目標 (Subnavigation: Design Goals)

定義：子導航是使用者介面中的導航元件，用於幫助使用者訪問資訊架構中更低階別的分類。

設計子導航時，應追求以下目標：最小化互動成本：使用者訪問目標內容時，應儘量減少點選、滾動和頁面載入次數。

支援典型導航路徑：如果使用者在一次會話中經常從一個版塊跳到另一個版塊，子導航應簡化這種跨版塊的操作。如果使用者大多停留在單一版塊內，子導航應專注於支援這種模式。

提高可發現性：使用者應快速找到子導航，並能清楚地區分主導航和子導航。

移動端子導航的型別 (Types of Subnavigation on Mobile)

摺疊面板 (Accordions Inside a Main Menu)

摺疊面板透過在主導航選單中為主分類使用摺疊設計，點選展開時顯示對應的子分類。這種設計適合每個主分類下子分類數量較少（通常少於6個）的情況。

優點：

低互動成本：使用者可以隨時在頁面上透過主選單訪問子分類，無需額外載入頁面。

支援多種路徑：適合沒有固定導航模式的站點，讓使用者輕鬆跳轉到不同資訊層級的分支。

示例：

Tide.com 使用摺疊面板在主導航選單中展示子分類。

Seventhgeneration.com 將主分類用不同顏色區分，與子分類明顯區分開，避免使用者混淆。

缺點：

當子分類較多時（超過6個），主選單會過長，增加使用者尋找目標的難度。例如：

SBNation.com 使用摺疊面板，但子分類超過3個螢幕高度，使用者難以快速找到目標。

順序選單 (Sequential Menus)

順序選單隻顯示最後選中分類的子分類。使用者選擇主分類後，列表更新為對應的子分類，使用者可以透過選單內的“返回”按鈕返回上級分類。

優點：

順序選單能有效展示多個分類和子分類，適合螢幕較小的裝置。

缺點：

容易迷失方向：順序選單可能導致使用者失去對站點位置的理解，特別是在資訊層級較深或導航中斷的情況下。

互動成本較高：使用者需要反覆點選返回或前往下級分類。例如：

HIV.gov的順序選單使用者需要多次點選才能返回上一層級。

HIV.gov：當從主選單中選擇一個主要類別（HIV 基礎知識）時，會顯示相應的子類別，而不是原始內容選單。使用者可以透過點選選單內的“返回”按鈕在資訊層次結構中向上導航。

Hiv.gov：如果使用者不小心點選安卓手機的實體返回鍵以在選單中向上操作，他們會被帶到使用者在瀏覽器中之前訪問過的頁面。要到達選單層次結構的上一級，他們必須使用選單內的返回鍵。

Macys.com的選單使用麵包屑導航輔助返回，但視覺上不夠明顯，容易被誤認為主分類。

Macys.com：此順序選單為當前選單檢視顯示一系列麵包屑路徑（選單->購物->女士），因此使用者在想要在父層級中向上導航時，不太可能感到困惑或意外按下物理後退按鈕。（但請注意，麵包屑路徑看起來並不像，人們很容易將其誤認為是網站上可用的一組主要類別。）

不支援複雜導航：對於需要頻繁跨版塊跳轉的使用者，順序選單效率較低。

Macys.com：順序選單反映了使用者所在的頁面。登陸在“查詢商店”頁面的使用者在選單中找不到感興趣的內容，可能會認為該網站有故障或選單沒有任何有用的東西。

Mayoclinic.com：預設情況下，該網站會顯示其一個主要類別（患者護理和健康資訊——左截圖）下的子類別。在我們的測試中，大多數參與者無法找到進入頂級類別的途徑（顯示在右側），他們認為患者護理和健康資訊下的子類別就是該網站所提供的全部內容。

章節選單 (Section Menus)

章節選單是獨立於主導航的選單，通常出現在章節首頁，為該章節內的所有子分類提供導航。例如：

BBC.com 為新聞和體育等主分類設定了單獨的章節選單。

優點：可容納較多子分類，適合在單一章節內停留較長時間的使用者。

缺點：

不適合跨章節跳轉：當使用者需要跨章節切換時，章節選單效率較低，需額外返回章節首頁。

容易與主導航混淆：如果主導航和章節選單在設計上不夠區分，使用者可能忽視章節選單。Breastcancer.org重用了主頁上的“選單”按鈕作為章節選單入口，導致使用者無法識別其不同功能。

Breastcancer.org：用於主頁（左側）主導航選單的相同 UI 元素（選單按鈕）在更深層頁面（右側）的相應部分選單中被重複使用。人們不會期望一個按鈕根據其在網站上的位置而執行不同的操作，因此他們不會意識到可以點選選單按鈕來訪問當前類別的子類別。

Mayoclinic.com的章節選單和主導航外觀差異明顯，使用者更容易區分。

分類著陸頁 (Category Landing Pages)

當子分類過多時，可以透過分類著陸頁作為導航樞紐，列出所有子分類連結。

示例：Stanford.edu 的招生頁面包含6屏以上的資訊和子分類連結。

優點：分類著陸頁適合資訊層級複雜或子分類數量特別多的情況。

缺點：

互動成本高：每次切換子分類都需返回分類著陸頁載入頁面，效率低。

更適合使用者一次僅訪問單一資訊層級的場景，不適合需要頻繁切換的使用者。

結論 (Conclusion)

由於螢幕空間有限，設計移動端子導航具有挑戰性。以下是選擇子導航模式的決策演演演算法：

如果所有主分類的子分類少於6個，可選擇摺疊面板或子選單。

如果部分主分類的子分類在6到15個之間，可考慮章節選單。

如果每個主分類的子分類超過15個，建議使用分類著陸頁。

透過權衡站點資訊架構、使用者需求和互動成本，可以選擇最合適的子導航模式，最佳化使用者體驗並提高導航效率。